<% if stores.size > 1 %>
  <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
    <span class="w-75"><%= Spree.t('nav_bar.change_country')%></span>
    <a class="w-25 text-right mobile-navigation-category-link" data-category="countries" href="#" aria-label="<%= Spree.t('nav_bar.change_country')%>">
      <%= icon(name: 'arrow-right',
              classes: 'd-sm-none spree-icon-arrow spree-icon-arrow-right',
              width: 16,
              height: 16) %>
      <%= icon(name: 'arrow-right',
              classes: 'd-none d-sm-inline spree-icon-arrow spree-icon-arrow-right',
              width: 14,
              height: 27) %>
    </a>

    <ul class="list-unstyled position-absolute mobile-navigation-sublist" data-category="countries">
      <li class="text-center font-weight-bold mobile-navigation-sublist-header">
        <%= Spree.t('nav_bar.change_country')%>
      </li>
      <% stores.each do |store| %>
        <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
          <span class="flag-icon flag-icon-<%= store_country_iso(store) %>"></span>
          <%= link_to "//#{store.url}", class: 'dropdown-item text-uppercase d-flex' do %>
            <span><%= store.default_country&.name %></span>
            <span class="text-right w-100"><%= store_currency_symbol(store) %></span>
          <% end %>
        </li>
    <% end %>
    </ul>
  </li>
<% end %>
